<template>
  <div class="from">
    <div class="title">
      {{$t('ImageLayer_Mirrorlayer')}}
<!--      镜像层-->
    </div>
    <ul class="margin20">
      <li class="head">
        <span>{{$t('ImageLayer_Serialnumber')}}</span>
        <span>{{$t('ImageLayer_size')}}</span>
        <span>{{$t('ImageLayer_layer')}}</span>
      </li>
      <li v-for="(item, index) in historyList" :key="index">
        <span>{{ index + 1}}</span>
        <span>{{ item.Size | size }}</span>
        <span>{{ item.CreatedBy | createdby }}</span>
      </li>
    </ul>
  </div>
</template>

<script>
import post from '@/utils/post'
export default {
  data () {
    return {
      historyList: null
    }
  },
  props: ['Image'],
  mounted () {
    const docker = `curl --unix-socket /var/run/docker.sock -s "http:/v1.40/images/${this.Image.Id}/history"` // 镜像历史记录
    post({ docker }, res => {
      // console.log(res)
      this.historyList = res
    }, this)
  },
  filters: {
    size (value) {
      return Math.round(value / 1024 / 1024) + ' M'
    },
    createdby (value) {
      if (value.indexOf('#(nop)') !== -1) {
        return value.split('#(nop)')[1]
      } else {
        return value.split('/bin/sh -c')[1]
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.from{
  margin-top: 30px;
}
ul{
  border-radius: 5px;
  border: 1px solid #ccc;
  padding: 10px;
  font-size: 13px;
  li{
    display: flex;
    align-items: center;
    margin: 10px 0px;
    line-height: 24px;
    &:nth-child(2n){
      background: #fff;
    }
    span{
      text-align: center;
      &:nth-child(1){
        flex: 1;
        font-size: 16px;
      }
      &:nth-child(2){
        flex: 3;
      }
      &:nth-child(3){
        flex: 6;
        text-align: left;
        overflow : hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        text-align: justify;
      }
    }
  }
  .head{
    display: flex;
    line-height: 30px;
    font-size: 16px;
    font-weight: bold;
    span{
      text-align: center;
      &:nth-child(1){
        flex: 1;
      }
      &:nth-child(2){
        flex: 3;
      }
      &:nth-child(3){
        flex: 6;
        text-align: center;
      }
    }
  }
}
</style>
